<template>
  <div class="flight-item">
    <!-- 航班上半部分 -->

    <div>
      <el-row type="flex" align="middle" class="flight-info">
        <el-col :span="6">
          <span>{{ flightItem.airline_name }}</span
          >{{ flightItem.flight_no }}
        </el-col>
        <el-col :span="12">
          <el-row
            type="flex"
            justify="space-between"
            class="flight-info-center"
          >
            <el-col :span="8" class="flight-airport">
              <strong>{{ flightItem.dep_time }}</strong>
              <span
                >{{ flightItem.org_airport_name }}
                {{ flightItem.org_airport_quay }}
              </span>
            </el-col>
            <el-col :span="8" class="flight-time">
              <span>{{ flightTime }}</span>
            </el-col>
            <el-col :span="8" class="flight-airport">
              <strong>{{ flightItem.arr_time }}</strong>
              <span
                >{{ flightItem.dst_airport_name }}
                {{ flightItem.dst_airport_quay }}</span
              >
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6" class="flight-info-right">
          ￥<span class="sell-price">{{ bestPrice }}</span
          >起</el-col
        >
      </el-row>
    </div>

    <!-- 航班下半部分 -->
    <el-collapse-transition>
      <div class="flight-recommend" v-if="isShow">
        <el-row type="flex" justify="space-between" align="middle">
          <el-col :span="4"> 低价推荐</el-col>
          <el-col :span="20">
            <el-row
              type="flex"
              justify="space-between"
              align="middle"
              class="flight-sell"
              v-for="seatItem in flightItem.seat_infos"
              :key="seatItem.index"
            >
              <el-col :span="16" class="economics">
                <span> {{ seatItem.name }}</span> | {{ seatItem.supplierName }}
              </el-col>
              <el-col :span="5" class="price"
                >￥{{ seatItem.org_settle_price }}</el-col
              >
              <el-col
                :span="3"
                type="flex"
                align="middle"
                justify="space-between"
              >
                <el-button
                  type="warning"
                  size="mini"
                  @click.stop="handleSelected(seatItem.seat_xid)"
                  >选定</el-button
                >
                <p v-if="seatItem.nums != 'A'">剩余：{{ seatItem.nums }}</p>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
      </div>
    </el-collapse-transition>
  </div>
</template>

<script>
export default {
  props: {
    flightItem: {
      type: Object,
      default() {
        return {};
      },
    },
    isShow: Boolean,
  },
  methods: {
    handleSelected(seat_xid) {
      // console.log("点击选定");
      // 跳转到机票购买页面 带上机票的id和座位的id传输到机票购买页面
      this.$router.push({
        path: "/air/order",
        query: {
          id: this.flightItem.id,
          seat_xid,
        },
      });
    },
  },
  computed: {
    // 筛选最低价
    bestPrice() {
      // console.log(this.flightItem);
      let bestPrice = this.flightItem.seat_infos[0].org_settle_price;
      let subbestPrice = "";
      // console.log(bestPrice, "bestPrice");
      // 遍历所有的座位信息
      this.flightItem.seat_infos.forEach((seat) => {
        // 如果有更低价 将最低价赋值到定义的bestPrice
        if (bestPrice > seat.org_settle_price) {
          // 先存储次低价
          subbestPrice = bestPrice;
          // console.log(subbestPrice, "subbestPrice");
          //在存储 最低价
          bestPrice = seat.org_settle_price;
          // console.log(bestPrice, 2);
        }
      });
      // 处理数据为0返回次低价subbestPrice 不为0返回最低价bestPrice
      return bestPrice === 0 ? subbestPrice : bestPrice;
    },
    // 计算飞行的时间 将时间转化为分钟
    // 考虑方向 将时间转化为分钟
    // 出发时间： 21：30=21*60+30=1290m  到达时间：00：40=24*60+40=1480m  比较小时的值：出发>到达 到达的时间要加上24小时
    // 出发时间： 21：30=21*60+30=1290m  到达时间：23：10=23*60+10=1390m 比较小时的值：出发<到达

    flightTime() {
      // 截取需要的数据 小时和分钟
      // 出发时间处理
      const depTime = this.flightItem.dep_time.split(":");
      // 到达时间
      const arrTime = this.flightItem.arr_time.split(":");
      //出发时间 转化为分钟
      const depTimeMin = depTime[0] * 60 + parseInt(depTime[1]);
      // 到达时间转化为分钟
      // 需要判断出发时间的小时值是否大于到达时间的小时值
      let arrTimeMin = "";
      if (depTime[0] > arrTime[0]) {
        // 出发时间的小时值大于到达时间的小时值 如21>00 需要在到达的时间加上24小时的分钟
        arrTimeMin = 24 * 60 + parseInt(arrTime[1]);
      } else {
        arrTimeMin = arrTime[0] * 60 + parseInt(arrTime[1]);
      }
      // 将到达的分钟减去出发的分钟
      const timeMin = arrTimeMin - depTimeMin;
      // 拼接需要的时间数据格式 xx小时xx分
      return parseInt(timeMin / 60) + "小时" + (timeMin % 60) + "分";
    },
  },
};
</script>

<style lang="less" scoped>
.flight-item {
  border: 1px #ddd solid;
  margin-bottom: 10px;

  .flight-info {
    padding: 15px;
    cursor: pointer;

    > div {
      &:first-child,
      &:last-child {
        text-align: center;
      }
    }
  }

  .flight-info-center {
    padding: 0 30px;
    text-align: center;

    .flight-airport {
      strong {
        display: block;
        font-size: 24px;
        font-weight: normal;
      }
      span {
        font-size: 12px;
        color: #999;
      }
    }

    .flight-time {
      span {
        display: inline-block;
        padding: 10px 0;
        border-bottom: 1px #eee solid;
        color: #999;
      }
    }
  }

  .flight-info-right {
    .sell-price {
      font-size: 24px;
      color: orange;
      margin: 0 2px;
    }
  }
}
.flight-recommend {
  background: #f6f6f6;
  border-top: 1px #eee solid;
  padding: 0 20px;

  .flight-sell {
    border-bottom: 1px #eee solid;
    padding: 10px 0;

    &:last-child {
      border-bottom: none;
    }
    .economics {
      font-size: 12px;
      span {
        color: #f00;
      }
    }
    .flight-sell-left {
      font-size: 12px;
      span {
        color: green;
      }
    }

    .price {
      font-size: 20px;
      color: orange;
    }
    /deep/ .el-button--mini {
      padding: 8px 20px;
    }
    p {
      text-align: center;
    }
    .choose-button {
      text-align: center;
      color: #666;
      button {
        display: block;
        width: 100%;
        margin-bottom: 5px;
      }
    }
  }
}
</style>